<template>
	<view class="app-add-subtract dir-left-nowrap main-right cross-center">
		<!-- #ifdef MP-ALIPAY -->
		<image src="./image/subtract.png" class="app-icon" v-if="number > 0" @click="subtract"></image>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<image src="./../image/subtract.png" class="app-icon" v-if="number > 0" @click="subtract"></image>
		<!-- #endif -->
		<input class="app-input" v-if="number >= 0 " :value="number < item.goods_num ? number : item.goods_num" @input="changeNum"  type="number">
		<view class="app-icon main-center cross-center" :style="{'background-color': theme.background,'visibility' : number < item.goods_num ? 'visible' : 'hidden'}" @click="add">
			<!-- #ifdef MP-ALIPAY -->
			<image @load="imgLoad" v-show="loading" src="./image/add.png"></image>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<image @load="imgLoad" v-show="loading" src="./../image/add.png"></image>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
    export default {
        name: 'app-add-subtract',
	    props: {
            total_num: {
                type: Number,
	            default: function() {
	                return 0;
	            }
            },
            item: {
                type: Object,
	            default: function() {
	                return {}
	            }
            },
			theme: Object
	    },

		data() {
        	return {
        		number: '',
				loading: false
			}
		},
		watch: {
			total_num: {
				handler(value) {
					console.log(value)
					this.number = value > this.item.goods_num ? this.item.goods_num : value == 0 ? '' : value;
					console.log(this.number)
				}
			}
		},
		created() {
			console.log(this.total_num)
			this.number = this.total_num > this.item.goods_num ? this.item.goods_num : this.total_num == 0 ? '' : this.total_num;
		},
	    methods: {
            add() {
            	console.log(1)
                this.$emit('add', this.item);
            },
            subtract() {
            	console.log(2)
                this.$emit('subtract', this.item);
            },
            changeNum(e) {
            	this.number = e.detail.value
            	if(e.detail.value > this.item.goods_num) {
                    uni.showToast({
                        title: '输入数量超出库存数',
                        duration: 1000,
                        icon: 'none',
                    });
                    e.detail.value = this.item.goods_num
            	}
                this.$emit('changeNum', {item: this.item, data: Number(this.number)});
            },
			imgLoad() {
            	this.loading = true;
			}
	    }
    }
</script>

<style scoped lang="scss">
	.app-add-subtract {
		width: #{152rpx};
		height: #{40rpx};
		.app-icon {
			width: #{40rpx};
			height: #{40rpx};
			border-radius: 8rpx;
			image {
				width: #{20rpx};
				height: #{20rpx};
				display: block;
			}
		}
		.app-input {
			width: #{64rpx};
			height: #{40rpx};
			font-size: #{28rpx};
			color: #353535;
			text-align: center;
			background-color: #ffffff;
		}
	}
</style>